<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  实现标签属性的动态操作
      1.普通属性
      2.style
      3.class
   v-bind    实现标签属性动态的操作

-->
<div id="app">
    <!--    v-bind:属性名   vue实例会解析属性  src=> data -->
<!--    <img v-bind:src="src" alt="">-->
<!-- v-bind:属性名  简化  => :属性名   -->
    <img :src="src" alt="">
    <button @click="pre">上一张</button>
    <button @click="next">下一张</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            src: '1.png',
            srcs: ['1.png', '2.png', '3.png'],
            index: 0
        },
        methods: {
            pre() {
                this.index--
                if (this.index < 0) {
                    this.index = this.srcs.length - 1
                }
                this.src = this.srcs[this.index]
            },
            next() {
                this.index++
                if (this.index >= this.srcs.length) {
                    this.index = 0
                }
                this.src = this.srcs[this.index]
            }
        }
    })
</script>
</body>
</html>